<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{margin:0;padding:0;}
    .container{
      overflow: hidden;
      width:480px;
      height: 852px;
      margin:30px auto;
      box-shadow: 0 0 5px #000;
      background-image: url(./images/background.png);
      position: relative;
    }
    #plane{
      position: absolute;
    }
    #fire{
      position: absolute;
    }
    #enemyPlane{
      position:absolute;
      
    }
    .score{
      position: absolute;;
      right:0;
      top:0;
      padding:10px;
      width:120px;
    }
  </style>
</head>
<body onkeydown="onkeydownHandle()" onkeyup="onkeyupHandle()">
  <div class="container">
    <p class="score"> 分数为:  <span id="scoreNum"> 0 </span> </p>
    <div style="bottom:0;left:195px;" id="plane" >
      <img src="./images/plane.png" alt="">
      <!-- <img id="fire" src="./images/fire.png" alt=""> -->
    </div>
  </div>
</body>
<script src="controller.js"></script>
<script>
var score = 0;
var tw,ta,ts,td;
function onkeyupHandle(e){
  var ev = e || event;

  if(ev.key == "w"){ controller.W_KEYCODE = false }
  if(ev.key == "s"){ controller.S_KEYCODE = false }
  if(ev.key == "a"){ controller.A_KEYCODE = false }
  if(ev.key == "d"){ controller.D_KEYCODE = false }
}

function onkeydownHandle(e){
  var ev = e || event;
  console.log(ev.key)
  // 上
  if(ev.key == "w"){ controller.W_KEYCODE = true }
    if(controller.W_KEYCODE){
      var y = $("#plane").style.bottom.split("px")[0] - 0 + controller.PLANE_SPEED +"px"
      if(y.replace("px",'') > controller.BG_HEIGHT - controller.PLANE_HEIGHT){
        return
      }
      $("#plane").style.bottom = y;
    }

  // 下
  if(ev.key == "s"){ controller.S_KEYCODE = true }
    if(controller.S_KEYCODE){
      var y = $("#plane").style.bottom.split("px")[0] - 0 - controller.PLANE_SPEED +"px"
      if(y.replace("px",'') < 0){
        return
      }
      $("#plane").style.bottom = y;
    }

  // 左
  if(ev.key == "a"){ controller.A_KEYCODE = true }
    if(controller.A_KEYCODE){
      var y = $("#plane").style.left.split("px")[0] - 0 - controller.PLANE_SPEED +"px"
      if(y.replace("px",'') < 0) return
      $("#plane").style.left = y;
    }
  // 右
  if(ev.key == "d"){ controller.D_KEYCODE = true }
    if(controller.D_KEYCODE){
      var y = $("#plane").style.left.split("px")[0] - 0 + controller.PLANE_SPEED +"px"
      if(y.replace("px",'') > controller.BG_WIDTH - controller.PLANE_WIDTH) return
      $("#plane").style.left = y;
    }
}
// 子弹
t1 = setInterval(function(){
  var img = document.createElement("img");
  img.src = "./images/fire.png"
  img.id = "fire";
  img.style.bottom = $("#plane").style.bottom.replace("px","") - 0 + controller.PLANE_HEIGHT +"px";
   img.style.left = $("#plane").style.left.replace("px","") - 0 + controller.PLANE_WIDTH/2 - controller.FIRE_WIDTH / 2 +"px"
  $(".container").appendChild(img)
  
},controller.FIRE_FREQUENCY)


t2 = setInterval(function(){
  $s("#fire").forEach((item,index)=>{
    item.style.bottom = item.style.bottom.replace("px","") - 0 + controller.FIRE_SPEED + 'px';

    // 碰撞检测
    // if($s("#enemyPlane").length > 0){
    //   $s("#enemyPlane").forEach(item=>{
    //    var a = ($("#fire").offsetLeft - item.offsetLeft) * ($("#fire").offsetLeft - item.offsetLeft);
    //    var b = ($("#fire").offsetTop - item.offsetTop) * ($("#fire").offsetTop - item.offsetTop);
    //    if(a+b<controller.enemyPlane_WIDTH*controller.enemyPlane_HEIGHT){
    //      console.log("击中敌方飞机")
    //      item.src = './images/blowEnemyPlane.png'
    //    }
    //  })
    // }

    // console.log(y2)
    (function (item){
      var x2 = item.style.left.split("px")[0] - 0
      var y2 = item.style.bottom.split("px")[0] - 0

      var x3 = $("#plane").style.left.split("px")[0] - 0
      var y3 = $("#plane").style.bottom.split("px")[0] - 0
      // console.log(item)
      $s("#enemyPlane").forEach(_item=>{
        var x1 = _item.style.left.split("px")[0]
        var y1 = _item.style.bottom.split("px")[0]

        // 敌方飞机碰撞我的plane
        if(Math.abs(x1-x3)<controller.enemyPlane_WIDTH && Math.abs(y1 - y3) < controller.enemyPlane_HEIGHT){
          clearInterval(t1)
          clearInterval(t2)
          clearInterval(t3)
          clearInterval(t4)
          clearInterval(t5)
          console.log($(".container"))
          $(".container").innerHTML = `<h1 style="text-align:center;line-height:852px;">你的得分为:${score}</h1>`
        }

        // 子弹碰撞敌方飞机
        if(Math.abs(x1-x2)<controller.enemyPlane_WIDTH && Math.abs(y1 - y2) < controller.enemyPlane_HEIGHT){
          score +=100
          $("#scoreNum").innerHTML = score;
          _item.src = './images/blowEnemyPlane.png';
            setTimeout(()=>{
               _item.parentNode.removeChild(_item)
            },20)
        }
      })
    })(item)



    // 超出屏幕 删除
    if(item.style.bottom.replace("px","") > controller.BG_HEIGHT){
      // item.parentNode.removeChild(item)
      $(".container").removeChild(item )
    }
  })
},30)
// 随机生成敌方飞机
t3 = setInterval(()=>{
  var randomMath = Math.floor( Math.random()*controller.BG_WIDTH - controller.enemyPlane_WIDTH )
  var img = document.createElement("img");
  img.id = "enemyPlane"
  img.zIndex = '1'
  img.style.left = randomMath + 'px';
  img.style.bottom = '801px';
  img.src = './images/enemyPlane.png'
  $('.container').appendChild(img)

},1000)
// 删除超出屏幕的敌方飞机
t4 = setInterval(()=>{
  if($s("#enemyPlane").length>0){
    $s("#enemyPlane").forEach((item)=>{
      if(item.style.bottom.split("px")[0] - 0 < 0){
        item.parentNode.removeChild(item)
      }
    })
  }else{
    return ;
  }
},30)

t5 = setInterval(()=>{
  $s("#enemyPlane").forEach((item,index)=>{
    item.style.bottom = item.style.bottom.split("px")[0] - 0 - 10 + "px"
  })
},40)

// 判断子弹打中敌人
// 敌方飞机 Y - 敌方飞机 H == 子弹的 bottom + 子弹的 H  //Y轴
// 子弹 L - 敌方飞机 L <= w1  // X轴


</script>
</html>